<template>
  <div class="cooperation">
    <div class="cooperationDiv">合作伙伴</div>
    <div class="content">因专业而存在，疯狂体育在体育知识付费领域年均提供数十万条信息，为数十家合作方提供自身优异的内容服务。我们具备专业合作精神与高端的技术水平，成熟的数据接口接入，方便快捷的为您搭建体育知识付费平台，期待更多的伙伴加入疯狂红单合作的舞台！</div>
    <div class="cooperationInfo" v-for="(cooperation,index) in cooperations" >
      <div class="cooperationImgDiv">
        <img :src="getImgUrl(cooperation.img)">
      </div>
      <div class="cooperationName">
        {{cooperation.name}}
      </div>
    </div>
  </div>
</template>

<script>
  import api from "../../../../axios/api";

    export default {
        name: "cooperation",
      data(){
        return{
          cooperations:[]
        }
      },
      methods:{
        getCooperation() {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/cooperation", null, "post")
            .then(res => {
              this.cooperations = res.tList;
              console.log( this.cooperations)
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        },

        getImgUrl: function (img) {
          return  "/static/images/cooperation/" + img;
        },
      },
      created(){
        this.getCooperation();
      }
    }
</script>

<style scoped>
  .cooperation {width: 1000px;margin: 0 auto}
  .cooperationDiv{width: 100px;text-align: left}
  .content{text-align: left;margin-top: 5px;font-size:13px;}
  .cooperationInfo{width:150px ;height:81px;float: left;margin-top: 10px}
  .cooperationImgDiv {width: 150px;height: 60px;}
  .cooperationImgDiv > img {width: 120px;height: 60px;}
  .cooperationName {font-size:14px;}

</style>
